<template>
    <div class="invite">
        <nav-list :clickIndex="clickIndex"></nav-list>
        <div class="middle-invite">
            <div class="date-picker" style="width:50%;">
                <el-date-picker
                        v-model="pickerTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="changePicker"
                        :picker-options="pickerOptions2"
                        size="small"
                >
                </el-date-picker>
            </div>
            <div  id="lineVip"
                  v-loading="echartLoading"
                  element-loading-text="加载中..."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.1)"
                  style="width: 49vw; height: 80vh;display: inline-block;margin: 0 auto;"
            ></div>
            <div id="barVip"
                 v-loading="echartLoading"
                 element-loading-text="加载中..."
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.1)"
                 style="width: 49vw; height: 80vh;display: inline-block;margin: 0 auto;">

            </div>
        </div>
    </div>
</template>

<script>
import {getAskData, getAskDay} from "@/api/answerAsk/answerAsk";
import "echarts/extension/bmap/bmap";
import navList from "@/components/navList/navList.vue";

export default {
    name: "answerAsk",
    components: {
        navList
    },
    data() {
        return {
            echartLoading: false,
            // 日期时间范围不在同一天
            pickerOptions2: {
                onPick: ({ maxDate, minDate }) => {
                    if (minDate && !maxDate) {
                        this.timeOptionRange = minDate;
                    }
                    if (maxDate) {
                        this.timeOptionRange = null;
                    }
                },
                disabledDate: (time) => {
                    let timeOptionRange = this.timeOptionRange;
                    if (
                            timeOptionRange &&
                            time.getTime() === timeOptionRange.getTime()
                    )
                        return true;
                },
            },
            clickIndex: 6,
            pickerTime: "",

            bamStatus: "",

            lineOpiton: {
                title: {
                    text: "",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["提问数量"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                series: [
                    {
                        name: "提问数量",
                        type: "line",
                        stack: "askNum",
                        data: [],
                    }
                ],
            },
            barOption: {
                title: {
                    text: "",
                },
                color: ['#4DA1FF', '#F6C252'],
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["月提问量", "单日最高"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },

                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                series: [
                    {
                        name: "月提问量",
                        type: "bar",
                        stack: "month",
                        data: [],
                    },
                    {
                        name: "单日最高",
                        type: "bar",
                        stack: "day",
                        data: [],
                    },
                ],
            },
        };
    },
    created() {
        let startDate = this.$moment().add(-30, "days").format("YYYY-MM-DD");
        let endDate = this.$moment().add(0, "days").format("YYYY-MM-DD");
        this.pickerTime = [startDate, endDate];
    },
    mounted() {
        this.getPage();
        this.getDayData()
    },
    methods: {
        //获取邀请页面数据
        getPage() {
            console.log(this.pickerTime);
            this.echartLoading = true;
            let obj = {
                start_date: this.pickerTime[0],
                end_date: this.pickerTime[1],
            };
            console.log(obj);
            getAskData(obj).then((res) => {
                console.log(res)
                let xData = [];
                let yData = [];
                res.data.data.forEach((val) => {
                    xData.push(val.date);
                    yData.push(val.num);
                });
                this.lineOpiton.xAxis.data = xData;
                this.lineOpiton.series[0].data = yData;;
                this.$echarts
                        .init(document.getElementById("lineVip"))
                        .setOption(this.lineOpiton);
                this.echartLoading = false;
            });
        },
        getDayData() {
            this.echartLoading = true
            getAskDay().then(res => {
                console.log(res)
                let xData = [];
                let yData = [];
                let yData2 = []
                res.data.data.forEach((val) => {
                    yData.push(val.m);
                    yData2.push(val.d)
                });
                const year = this.$moment().format('YYYY')
                console.log(year);
                xData = [year+ '-01', year+ '-02',year+ '-03',year+ '-04',year+ '-05',year+ '-06',year+ '-07',year+ '-08',year+ '-09',year+ '-10',year+ '-11',year+ '-12']
                this.barOption.xAxis.data = xData;
                this.barOption.series[0].data = yData;
                this.barOption.series[1].data = yData2;
                this.$echarts
                        .init(document.getElementById("barVip"))
                        .setOption(this.barOption);
                this.echartLoading = false;
            })
        },

        changePicker(e) {
            let startDate = this.$moment(e[0]).format("YYYY-MM-DD");
            let endDate = this.$moment(e[1]).format("YYYY-MM-DD");
            this.pickerTime = [startDate, endDate];
            this.getPage()
        }
    },
};
</script>

<style lang="scss">
@import "@/styles/home.scss";
@import "@/styles/common.scss";

.header-cell {
    color: #61d2f7 !important;
    font-size: 14px;
    font-weight: 600;
    height: 48px;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.row-cell {
    color: #fff !important;
    background-color: #072951 !important;
}
.row-cells {
    color: #fff !important;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}
.el-card {
    background-color: #072951 !important;
}
.el-pagination__total {
    color: #fff !important;
}
.el-pagination__jump {
    color: #fff !important;
}
.hover-row {
    background-color: #072951 !important;
}

.el-table__body .el-table__row.hover-row td {
    background-color: #072951 !important;
}

.el-table tbody tr:hover td {
    background-color: #072951 !important;
}
.el-dialog__header {
    background-color: #081832 !important;
    color: #fff !important;
}
.el-dialog__body {
    background-color: #081832 !important;
}
.el-range-editor--small.el-input__inner {
    background-color: #072951 !important;
}
.el-range-separator {
    color: #fff !important;
}
</style>